<template>
  <div class="addOrEditIntelligenPush">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <i class="el-icon-back"></i>推送
      </div>
      <ul class="steps-list">
        <li v-for="(item,index) in stepslist"
            :class="active==index?`active`:active>index?`complete`:``">
          <span v-if="active>index"><i class="el-icon-check"></i></span>
          <span v-else>{{ index + 1 }}</span>
          {{ item }}
        </li>

      </ul>
    </div>
    <div class="content-main">
      <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
      >
        <div class="content-item" v-if="active==0">
          <el-form-item label="方案名称：" prop="basicInfo.taskName">
            <el-input v-model="form.basicInfo.taskName" placeholder="请输入方案名称" maxlength="20" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="选择企业：" prop="userName2">
            <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择企业">
              <el-option
                  v-for="item in groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生效企微号：" prop="basicInfo.enterpriseInfo.ids">
            <el-button type="primary" plain @click="getSelectUser">选择企微号</el-button>
            <div class="user-images">
              <span>已选</span>
              <div class="img-li">
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
                <img src="../../../assets/images/profile.jpg"/>
              </div>
              <div><i class="el-icon-more"></i></div>
              <div class="number">等5个</div>
            </div>
          </el-form-item>
          <el-form-item prop="basicInfo.taskName" label="选择受众">
            受众需要满足一下条件组
            <div class="condition-big">
              <div class="condition-item">
                <!--              大循环-->
                <div class="title-big">
                  <div class="title">
                    条件组1
                  </div>
                  需要满足下列
                  <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择" style="width: 110px">
                    <el-option
                        v-for="item in conditionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                  条件
                  <div class="big-add"><i class="el-icon-circle-plus-outline"></i></div>
                </div>
                <div class="small-item">
                  <div class="add">
                    <i class="el-icon-circle-plus-outline"></i>
                  </div>
                  <div class="select-big">
                    <el-form-item prop="basicInfo.taskName" label-width="0px">
                      <el-select v-model="form.basicInfo.groupInfo" placeholder="请选择" size="small">
                        <el-option-group
                            v-for="group in options"
                            :key="group.label"
                            :label="group.label">
                          <el-option
                              v-for="item in group.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-option-group>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="basicInfo.taskName" label-width="0px" style="">
                      <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择企业" size="small" style="width: 110px">
                        <el-option
                            v-for="item in hasList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--                选择企微标签-->
                    <el-form-item class="item-right">
                      <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                    </el-form-item>
                    <!--                &lt;!&ndash;                选择智能标签&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt'/>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择性别的代码&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo"  size="small" filterable placeholder="请选择性别" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sexList"-->
                    <!--                      :key="item.id"-->
                    <!--                      :label="item.name"-->
                    <!--                      :value="item.id">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择来源&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sourceList"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                时间&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;               选择时间后，再次判断&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                一个是时间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.time"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="date"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->
                    <!--                  -->
                    <!--&lt;!&ndash;                一个是时间区间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.dateRange"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="daterange"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->

                    <!--&lt;!&ndash;                如果选择加入群聊(未加入群聊、加入群里都要进行下面判断)&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" multiple size="small" placeholder="请选择">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in groupType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->
                    <!--                <el-form-item>-->
                    <!--                  <el-button type="primary" plain>选择客户群</el-button>-->
                    <!--                </el-form-item>-->
                    <!--                  &lt;!&ndash;                 成为好友时长&ndash;&gt;-->
                    <!--                <el-form-item>-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in symbolType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->

                    <!--                <template>-->
                    <!--                  &lt;!&ndash;                填写数字&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                  <el-input v-model="form.basicInfo.taskName" placeholder="" size="small"></el-input>-->
                    <!--                  </el-form-item>-->
                    <!--                  &lt;!&ndash;                分钟小时天&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in symbolType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->

                    <!--                </template>-->

                  </div>

                </div>

              </div>
            </div>
          </el-form-item>
          <el-form-item label="推送内容：" prop="userName2">
            <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择企业">
              <el-option
                  v-for="item in groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划内容：" prop="userName2">
            待引用组件
          </el-form-item>
        </div>
        <div class="content-item" v-if="active==1">
          <el-form-item label="计划类型：" prop="userName2">
            <el-radio-group v-model="form.type" class="launchType">
              <el-radio v-for="(item,index) in selectTypeList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
            </el-radio-group>
            <!--          <template>-->
            <!--&lt;!&ndash;            定时型单次&ndash;&gt;-->
            <!--            <el-form-item label="推送时间">-->
            <!--              在-->
            <!--              <el-date-picker-->
            <!--                  v-model="form.endtime"-->
            <!--                  type="datetime"-->
            <!--                  size="small"-->
            <!--                  value-format="yyyy-MM-dd HH:mm:ss"-->
            <!--                  placeholder="选择日期时间"-->
            <!--              >-->
            <!--              </el-date-picker>-->
            <!--              对受众用户进行触达-->
            <!--            </el-form-item>-->
            <!--          </template>-->
          </el-form-item>
          <!--        定时型-重复-->
          <template>
            <el-form-item label="推送时间：" prop="userName2">
              <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择">
                <el-option
                    v-for="item in dayType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <!--            如果推送选择的话，则做一下处理-->
              <!--            每天-->
              <!--            <el-time-picker v-model="value1" placeholder="任意时间点"></el-time-picker>-->

              <template>

                <!--              如果是每月-->
                <el-select v-model="form.basicInfo.groupInfo" multiple filterable placeholder="请选择" popper-class="select-multiple">
                  <div class="select-item">
                    <el-option
                        v-for="item in dayNumList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </div>

                </el-select>
                <el-time-picker v-model="value1" placeholder="任意时间点"></el-time-picker>
              </template>
              <template>
                <el-select v-model="form.basicInfo.groupInfo" multiple filterable placeholder="请选择" popper-class="select-multiple">
                  <div class="select-item">
                    <el-option
                        v-for="item in weekList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </div>

                </el-select>
              </template>


            </el-form-item>
          </template>
          <!--        如果是触发型完成条件-->
          <el-form-item label="推送时间：" prop="userName2">
            在起止时间完成下列条件组后进行推送
            <div class="condition-big">
              <div class="condition-item">

                <div class="title-big">
                  <div class="title">
                    条件组1
                  </div>
                  需要满足下列
                  <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择" style="width: 110px">
                    <el-option
                        v-for="item in conditionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                  条件
                  <div class="big-add"><i class="el-icon-circle-plus-outline"></i></div>
                </div>
                <div class="small-item">
                  <div class="add">
                    <i class="el-icon-circle-plus-outline"></i>
                  </div>
                  <div class="select-big">
                    <el-form-item prop="basicInfo.taskName" label-width="0px">
                      <el-select v-model="form.basicInfo.groupInfo" placeholder="请选择" size="small">
                        <el-option-group
                            v-for="group in options"
                            :key="group.label"
                            :label="group.label">
                          <el-option
                              v-for="item in group.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-option-group>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="basicInfo.taskName" label-width="0px" style="">
                      <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择企业" size="small" style="width: 110px">
                        <el-option
                            v-for="item in hasList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--                选择企微标签-->
                    <el-form-item class="item-right">
                      <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                    </el-form-item>
                    <!--                &lt;!&ndash;                选择智能标签&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt'/>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择性别的代码&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo"  size="small" filterable placeholder="请选择性别" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sexList"-->
                    <!--                      :key="item.id"-->
                    <!--                      :label="item.name"-->
                    <!--                      :value="item.id">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择来源&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sourceList"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                时间&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;               选择时间后，再次判断&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                一个是时间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.time"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="date"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->
                    <!--                  -->
                    <!--&lt;!&ndash;                一个是时间区间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.dateRange"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="daterange"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->

                    <!--&lt;!&ndash;                如果选择加入群聊(未加入群聊、加入群里都要进行下面判断)&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" multiple size="small" placeholder="请选择">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in groupType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->
                    <!--                <el-form-item>-->
                    <!--                  <el-button type="primary" plain>选择客户群</el-button>-->
                    <!--                </el-form-item>-->
                    <!--                  &lt;!&ndash;                 成为好友时长&ndash;&gt;-->
                    <!--                <el-form-item>-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in symbolType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->

                    <!--                <template>-->
                    <!--                  &lt;!&ndash;                填写数字&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                  <el-input v-model="form.basicInfo.taskName" placeholder="" size="small"></el-input>-->
                    <!--                  </el-form-item>-->
                    <!--                  &lt;!&ndash;                分钟小时天&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in symbolType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->

                    <!--                </template>-->

                  </div>

                </div>

              </div>
            </div>
          </el-form-item>
          <el-form-item label="起止时间：" prop="userName2">
            <el-date-picker
                v-model="dateRange1"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                class="select-right"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="多次推送：" prop="userName2">
            <el-radio-group v-model="form.type" class="launchType">
              <el-radio v-for="(item,index) in numList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="content-item" v-if="active==2">
          <el-form-item label="推送目标：" prop="userName2">
            <el-switch v-model="value1" active-color="#13ce66">
            </el-switch>
          </el-form-item>
          <el-form-item label="目标">
            <el-input v-model="value1" size="small" style="width: 80px; margin: 0px 10px"></el-input>
            <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择" size="small" style="width: 110px">
              <el-option
                  v-for="item in dayTimeType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
            <div class="condition-big">
              <div class="condition-item">

                <div class="title-big">
                  <div class="title">
                    条件组1
                  </div>
                  需要满足下列
                  <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择" style="width: 110px">
                    <el-option
                        v-for="item in conditionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                  条件
                  <div class="big-add"><i class="el-icon-circle-plus-outline"></i></div>
                </div>
                <div class="small-item">
                  <div class="add">
                    <i class="el-icon-circle-plus-outline"></i>
                  </div>
                  <div class="select-big">
                    <el-form-item prop="basicInfo.taskName" label-width="0px">
                      <el-select v-model="form.basicInfo.groupInfo" placeholder="请选择" size="small">
                        <el-option-group
                            v-for="group in options"
                            :key="group.label"
                            :label="group.label">
                          <el-option
                              v-for="item in group.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-option-group>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="basicInfo.taskName" label-width="0px" style="">
                      <el-select v-model="form.basicInfo.groupInfo" filterable placeholder="请选择企业" size="small" style="width: 110px">
                        <el-option
                            v-for="item in hasList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--                选择企微标签-->
                    <el-form-item class="item-right">
                      <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                    </el-form-item>
                    <!--                &lt;!&ndash;                选择智能标签&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <MultipleSelect size="small" placeholder='智能标签' :receiverNameOpt='lableOpt'/>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择性别的代码&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo"  size="small" filterable placeholder="请选择性别" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sexList"-->
                    <!--                      :key="item.id"-->
                    <!--                      :label="item.name"-->
                    <!--                      :value="item.id">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--                &lt;!&ndash;                选择来源&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in sourceList"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                时间&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;               选择时间后，再次判断&ndash;&gt;-->
                    <!--                <el-form-item class="item-right">-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" multiple placeholder="请选择">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in timeType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--&lt;!&ndash;                一个是时间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.time"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="date"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->
                    <!--                  -->
                    <!--&lt;!&ndash;                一个是时间区间&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-date-picker-->
                    <!--                      size="small"-->
                    <!--                      v-model="form.dateRange"-->
                    <!--                      style="width: 240px"-->
                    <!--                      value-format="yyyy-MM-dd"-->
                    <!--                      type="daterange"-->
                    <!--                      range-separator="-"-->
                    <!--                      start-placeholder="开始日期"-->
                    <!--                      end-placeholder="结束日期"-->
                    <!--                    ></el-date-picker>-->
                    <!--                  </el-form-item>-->

                    <!--&lt;!&ndash;                如果选择加入群聊(未加入群聊、加入群里都要进行下面判断)&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" multiple size="small" placeholder="请选择">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in groupType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->
                    <!--                <el-form-item>-->
                    <!--                  <el-button type="primary" plain>选择客户群</el-button>-->
                    <!--                </el-form-item>-->
                    <!--                  &lt;!&ndash;                 成为好友时长&ndash;&gt;-->
                    <!--                <el-form-item>-->
                    <!--                  <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                    <el-option-->
                    <!--                      v-for="item in symbolType"-->
                    <!--                      :key="item.value"-->
                    <!--                      :label="item.label"-->
                    <!--                      :value="item.value">-->
                    <!--                    </el-option>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->

                    <!--                <template>-->
                    <!--                  &lt;!&ndash;                填写数字&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                  <el-input v-model="form.basicInfo.taskName" placeholder="" size="small"></el-input>-->
                    <!--                  </el-form-item>-->
                    <!--                  &lt;!&ndash;                分钟小时天&ndash;&gt;-->
                    <!--                  <el-form-item>-->
                    <!--                    <el-select v-model="form.basicInfo.groupInfo" size="small" filterable placeholder="请选择" style="width: 110px">-->
                    <!--                      <el-option-->
                    <!--                        v-for="item in symbolType"-->
                    <!--                        :key="item.value"-->
                    <!--                        :label="item.label"-->
                    <!--                        :value="item.value">-->
                    <!--                      </el-option>-->
                    <!--                    </el-select>-->
                    <!--                  </el-form-item>-->

                    <!--                </template>-->

                  </div>

                </div>

              </div>
            </div>
          </el-form-item>

          <el-form-item label="打企微标签">
            <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
          </el-form-item>
          <el-form-item label="智能标签">
            <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="footer-btn">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary">上一步</el-button>
      <el-button type="primary">下一步</el-button>
      <el-button  @click="onSubmit('form')">提交</el-button>
    </div>
    <!--&lt;!&ndash;    添加链接&ndash;&gt;-->
    <!--    <ReplyLink v-if="showReplyLink" :visableIf.sync="showReplyLink"></ReplyLink>-->
    <!--&lt;!&ndash;    选择企微号&ndash;&gt;-->
    <!--    <selectByUser v-if="showSelectByUser" :visableIf.sync="showSelectByUser"></selectByUser>-->
  </div>
</template>

<script>
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor';
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register('modules/quillEmoji', quillEmoji)
import VideoUpload from "@/components/VideoUpload/index";

export default {
  name: 'addOrEditIntelligenPush',
  components: {
    quillEditor,
    VideoUpload,
    // 'ReplyLink': () => import('./ReplyLink.vue'),//导出弹窗
    // 'selectByUser': () => import('./selectByUser.vue'),//导出弹窗
    'MultipleSelect': () => import('@/views/components/multipleSelect.vue'),//导出弹窗
    // 'viewConditions': () => import('./viewConditions.vue'),//导出弹窗
  },
  data() {
    return {
      stepslist: ['受众与内容', '推送时机', '推送目标'],
      showViewConditions: false,
      showReplyLink: false,
      showSelectByUser: false,
      active: 1,
      input3: null,
      type: 0,
      timeData: null,//发布日期
      value1: null,
      dataTime: null,
      numList: [
        {value: '1', label: '同客户仅触发一次'},
        {value: '2', label: '同客服可触发多次'},
      ],
      selectTypeList: [
        {value: '1', label: '定时型-单次'},
        {value: '2', label: '定时型-重复'},
        {value: '3', label: '触发型-完成条件'},
      ],
      dayNumList: [],//每月
      weekList: [
        {value: '1', label: '周一'},
        {value: '2', label: '周二'},
        {value: '3', label: '周三'},
        {value: '4', label: '周四'},
        {value: '5', label: '周五'},
        {value: '6', label: '周六'},
        {value: '7', label: '周日'},
      ],//每周
      options: [{
        label: '属性',
        options: [
          {value: '1', label: '企业标签'},
          {value: '2', label: '智能标签'},
          {value: '3', label: '性别'},
          {value: '4', label: '来源'},
          {value: '5', label: '添加时间'}
        ]
      }, {
        label: '系统',
        options: [{
          value: '6',
          label: '加入群里'
        }, {
          value: '6',
          label: '未加入群里'
        }, {
          value: '8',
          label: '上次发言时间'
        },
        ]
      },
      ],
      dayType: [
        {value: '1', label: '每天'},
        {value: '2', label: '每周'},
        {value: '3', label: '每月'},
      ],
      dayTimeType: [
        {value: '1', label: '天'},
        {value: '2', label: '小时'},
        {value: '3', label: '分钟'},
      ],
      timeType: [
        {value: '1', label: '晚于'},
        {value: '2', label: '早于'},
        {value: '3', label: '在区间内'},
        {value: '4', label: '在区间外'},
      ],
      symbolType: [
        {value: '1', label: '小于'},
        {value: '2', label: '等于'},
        {value: '3', label: '大于'},

      ],
      groupType: [
        {value: '1', label: '在群'},
      ],
      sourceList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      editorOption: {
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: {
            container: [
              //  ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
              // ['blockquote', 'code-block'], //引用，代码块
              // [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
              // [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
              // [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
              //  [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
              // [{ 'direction': 'rtl' }], // 文本方向
              //  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              //  [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
              //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
              //  [{ 'font': [] }], //字体
              //  [{ 'align': [] }], //对齐方式
              //  ['clean'], //清除字体样式
              //  ['image', 'video'] //上传图片、上传视频
              ['emoji'],//表情包
            ], // 工具栏
          },
          //   placeholder: "输入内容..."
        }, //编辑器配置项
      },
      sexList: [
        //性别
        {id: 1, name: "男"},
        {id: 2, name: "女"},
        {id: 3, name: "未知"},
      ],
      hasList: [
        {id: 1, name: "包含"},
        {id: 2, name: "不包含"},
      ],
      conditionList: [
        {id: 1, name: "全部"},
        {id: 2, name: "任一"},
      ],
      timeList: [
        {id: 1, name: "分钟"},
        {id: 2, name: "秒"},
      ],
      msgTypeList: [
        //有无备注
        {id: 1, name: "有备注"},
        {id: 2, name: "无备注"},
      ],
      pushTimeList: [
        //有无备注
        {id: 1, name: "立即发布"},
        {id: 2, name: "定时发布"},
      ],
      dateRange1: [],
      checked: true,
      fileTypeList: [
        {value: 1, label: "无"},
        {value: 2, label: "图片"},
        {value: 3, label: "视频"},
        {value: 4, label: "链接"},
        {value: 5, label: "视频号"},
      ],
      form: {
        basicInfo: {
          taskName: null,//任务名称
          groupInfo: null,//分组信息
          enterpriseInfo: {
            //企微号信息
            ids: [],//选择的人员
            useType: 1,//客户范围
            condition: [{
              qwLabel: null,//企微标签
            }]
          }
        }
      },
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      budgetTypeList: [
        {
          label: '所有客户',
          value: 0,
        },
        {
          label: '筛选客户',
          value: 1,
        }
      ],//
      groupList: [
        //群查找
        {value: 1, label: "智行"},
        {value: 2, label: "锐行"},
      ],
      wxLabelList: [
        //群查找
        {value: 1, label: "含任意标签"},
        {value: 2, label: "含所有标签"},
        {value: 3, label: "未打标签"},
      ],
      rules: {
        'basicInfo.taskName': [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
        'basicInfo.groupInfo': [
          {required: true, message: '请选择分组', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.ids': [
          {required: true, message: '请选择下发的企微号', trigger: 'blur'}
        ],
        'basicInfo.groupInfo.enterpriseInfo.useType': [
          {required: true, message: '请选择客户范围', trigger: 'blur'}
        ],

      },
    }
  },
  created() {
    this.dayNumList = [];
    for (let i = 0; i < 31; i++) {
      let obj = {
        value: i,
        label: i + 1
      }
      this.dayNumList.push(obj);
    }

  },
  mounted() {
  },
  watch: {},
  methods: {
    getSelectUser() {
      //选择企微号
      this.showSelectByUser = true;
    },
    getlink() {
      this.showReplyLink = true;
    },
    onEditorBlur() {
    }, // 失去焦点触发事件
    onEditorFocus() {
    }, // 获得焦点触发事件
    onEditorChange() {
    }, // 内容改变触发事件
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    gotoPage() {
      this.$router.push({
        path: '/IntelligentOperationMgt/IntelligentPush/IntelligentPushList',
        query: {
          urlActive: 0,
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">

.tips {
  display: block;
  background: #fed;
  border-radius: 2px;
  border: 1px solid #ffdbb6;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  width: 1000px;
  margin: 20px auto;
  font-size: 14px;
}

.content-big {
  height: calc(100vh - 150px);
  overflow-y: auto;
  width: 1000px;
  margin: auto;
  overflow-x: hidden;
}

.content-main {
  background: #fff;
  padding: 12px;
  width: 1000px;
  margin: 12px auto 12px auto;
  height: calc(100vh - 120px);
  overflow-y: auto;

  .content-title {
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 14px 20px;
    margin-bottom: 20px;
  }

  .el-form {
    padding: 0px 40px;

  }

}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  position: relative;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    i {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
  }

}


.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}

.footer-btn {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.addOrEditIntelligenPush {
  position: relative;
  padding-bottom: 50px;
}

.steps-list {
  display: flex;
  position: absolute;
  left: 50%;
  margin-left: -280px;

  li {
    list-style: none;
    margin: 0px 35px;
    font-size: 14px;
    display: flex;
    color: rgba(0, 0, 0, .45);
    position: relative;

    &.complete {
      span {
        color: #2d8cf0;
        border-color: #2d8cf0;
      }
    }

    &.active {
      color: #2d8cf0;

      span {
        background: #2d8cf0;
        color: #fff;
        border-color: #2d8cf0;
      }

      &:after {
        background: #2d8cf0;
      }
    }

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      height: 1px;
      background: #eee;
      width: 55px;
      left: -60px;
    }

    &:first-child {
      &:after {
        display: none;
      }
    }

    span {
      width: 24px;
      height: 24px;
      margin: 0 8px 0 0;
      font-size: 12px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, .25);

    }
  }
}

.select-big {
  display: flex;
  align-items: center;

  .el-form-item {
    margin-right: 5px;
  }
}

.small-item {
  position: relative;
  background: #fff;
  padding: 10px;
  margin-top: 10px;

  .add {
    position: absolute;
    right: 10px;
    font-size: 24px;
    top: 12px;
    cursor: pointer;
  }
}

.condition-item {
  margin-top: 12px;
  background: #f0f2f5;
  border-radius: 6px;
  padding: 10px;
}

.title-big {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .65);
  position: relative;

  .title {
    font-size: 14px;
    padding: 0px 16px;
    background: #fff;
    height: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    margin-right: 10px;
  }

  .el-select {
    margin: 0px 10px;
  }
}

.big-add {
  font-size: 24px;
  position: absolute;
  right: 10px;
  cursor: pointer;

}

.select-multiple {

}

.select-item {
  width: 300px;

  ::v-deep .el-select-dropdown__item {
    height: 30px;
  }
}

.small-item {
  display: flex;
}
</style>
